<template>
    <div id="app">
        <div class="appDiv">
            <p class="appDiv_title">嘉兴科技馆</p>

            <van-form @submit="onSubmit">
                <van-field
                    v-model="data.username"
                    name="用户名"
                    label="用户名"
                    size="large"
                    :clearable="data.clearable"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="data.password"
                    type="password"
                    name="密码"
                    size="large"
                    :clearable="data.clearable"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button 
                        round 
                        block 
                        size="small" 
                        type="primary" 
                        :disabled="data.loading"
                        :loading="data.loading"
                        :loading-text="data.loadingText"
                        native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
            
        </div>
    </div>
</template>

<script lang="ts">
    import { 
        ref, 
        reactive,
        defineComponent
    } from "vue"
    import { Notify } from 'vant'
    import router from '../router'
    export default defineComponent({
        name: "app",
        // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
        setup() {
            // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似
            const data = reactive({
                username: ref(''),
                password: ref(''),
                loading: ref(false),
                loadingText: ref('登陆中'),
                clearable: ref(true)
            });
            const onSubmit = () => {
                data.loading = true
                if(data.username == 'admin' && data.password == 'admin'){
                    Notify({ type: 'success', message: '登陆成功' });
                    setTimeout(()=>{
                        router.push("/demo2");
                        data.loading = false
                    },1000)
                    return false
                }
                data.loading = false
                Notify({ type: 'danger', message: '账号或密码错误' });
            }
            
            // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用
            return {
                //讲响应式的对象变为普通对象 在家。。。结构，在模板中就可以直接使用属性，不用data.name
                // ...toRefs(data),                
                onSubmit,
                data
            };
            
        },
    })
</script>
<style scoped>
    .appDiv{
        width: 400px;
        height:100%;
        position:absolute;
        left:50%;
        top:0;
        margin-left:-200px;
    }
    .appDiv_title{
        width:100%;
        margin-top: 150px;
        line-height: 80px;
        font-weight: bold;
        font-size: 40px;
        text-align: center;
    }
</style>